/**
 * @author mc
 * @date 2021/7/20 2:52 下午
 */
/**
 * 网页加载的时候，DOM 节点的生成会产生变动记录，因此只要观察 DOM 的变动，
 * 就能在第一时间触发相关事件，因此也就没有必要使用DOMContentLoaded事件。
 * 下面的代码，使用MutationObserver对象封装一个监听 DOM 生成的函数。
 */
(function (window) {
    let listener = []
    let observer = null
    const ready = (selector, callback) => {
        listener.push({
            selector,
            callback
        })
        if (!observer) {
            observer = new MutationObserver(check)
            observer.observe(window.document.documentElement, {
                childList: true,
                subtree: true
            })
        }
    }
    const check = () => {
        // 因为执行check函数异步的，所以需要listener是一个数组，收集完用户定义的callback和selector并依次去执行
        listener.forEach(({selector, callback}) => {
            // 如果找到相应的元素，则执行callback通知该元素已被加载
            const elements = document.querySelectorAll(selector) || []
            elements.forEach(element => {
                // 防止同一个元素重复执行回调
                if (!element.ready) {
                    element.ready = true
                    callback.call(element, element)
                }
            })
        })
    }
    window.ready = ready
})(window)
